.codes_container {
  height: calc(100vh - 92px);
  box-sizing: border-box;
  padding: 12px;

  .body {
    box-sizing: border-box;
    padding: 12px;
    background-color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 12px;

    .header {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      row-gap: 10px;
      column-gap: 5px;
      .btn_group {
        display: flex;
        column-gap: 5px;
      }

      .search {
        display: flex;
        flex-wrap: wrap;
        row-gap: 10px;
        column-gap: 5px;
      }
    }

    .table-footer {
      flex: 1;
      height: 0;
      display: flex;
      flex-direction: column;
      row-gap: 12px;

      .table {
        max-height: calc(100% - 40px);
      }

      .pagination {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}

.export_code_modal_form_content {
  display: flex;
  gap: 12px;
  flex-direction: column;
  padding: 0 112px;

  .date_range {
    display: flex;
    justify-content: space-between;
    gap: 5px;
  }

  .form_item_container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 5px;
  }

  .grid-layout {
    display: grid;
    grid-template-columns: repeat(2, 244px);
    justify-content: space-between;
    row-gap: 12px;

    :deep(.el-input) {
      width: 100%;
    }
  }
}

.date-range {
  :deep(.el-input__wrapper) {
    height: 28px !important;
  }
}

.export_code_modal {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}

.export-btn {
  display: flex;
  justify-content: flex-end;
  margin-top: 2vh;
}

.date-range {
  display: flex;
  gap: 5px;

  :deep(.el-input__wrapper) {
    box-sizing: border-box;
  }

  .start-date,
  .end-date {
    flex: 1;
  }
}
